<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 引入浏览器默认样式 -->
  <link rel="stylesheet" href="./css/reset.css">
  <!-- 引入MUI -->
  <link rel="stylesheet" href="./lib/mui/css/mui.css">
  <!-- 引入字体图标库 -->
  <link rel="stylesheet" href="./lib/fontAwesome/css/font-awesome.css">
  <!-- 引入公共样式 -->
  <link rel="stylesheet" href="./css/common.css">
  <!-- 引入页面样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <title>乐淘云购-首页</title>
  <!-- 引入网站图标 -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>

  <!-- 1.头部 -->
  <header class="lt-header mui-bar mui-bar-nav">
    <a class="mui-icon mui-icon-bars mui-pull-left mui-plus-visible"></a>
    <a id="lt-search" class="fa fa-search mui-pull-right"></a>
    <h1 class="mui-title">乐淘云购</h1>
  </header>
  <!-- 2.底部 -->
  <nav class="lt-footer mui-bar mui-bar-tab">
    <a class="mui-item mui-active" href="./index.html">
      <span class="fa fa-home"></span>
      <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-item" href="./sort.html">
      <span class="fa fa-reorder"></span>
      <span class="mui-tab-label">分类</span>
    </a>
    <a class="mui-item " href="./cart.html">
      <span class="fa fa-shopping-cart"></span>
      <span class="mui-tab-label">购物车</span>
    </a>
    <a class="mui-item" href="./profile.html">
      <span class="fa fa-user"></span>
      <span class="mui-tab-label">个人中心</span>
    </a>
  </nav>
  <!-- 3.主体 -->
  <main class="mui-content">
    <!-- 3.1 轮播图 -->
    <div id="slider" class="mui-slider">
      <div class="mui-slider-group mui-slider-loop">
        <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#">
            <img src="./image/banner6.png">
          </a>
        </div>
        <!-- 第一张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="./image/banner1.png">
          </a>
        </div>
        <!-- 第二张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="./image/banner2.png">
          </a>
        </div>
        <!-- 第三张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="./image/banner3.png">
          </a>
        </div>
        <!-- 第四张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="./image/banner4.png">
          </a>
        </div>

        <!-- 第五张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="./image/banner5.png">
          </a>
        </div>

        <!-- 第六张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="./image/banner6.png">
          </a>
        </div>
        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#">
            <img src="./image/banner1.png">
          </a>
        </div>
      </div>
      <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
      </div>
    </div>
  </main>
  <!-- 引入zepto -->
  <script src="./lib/zepto/zepto.min.js"></script>
  <!-- 引入MUI -->
  <script src="./lib/mui/js/mui.js"></script>
  <!-- 引入首页js -->
  <script src="./js/index.js"></script>
</body>

</html>